<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 通配符选择器：匹配所有的HTML标签 */
        * {
            margin: 0;
            padding: 0;
        }

        body {
            color: #333;
        }

        img {
            vertical-align: middle;
        }

        .header {
            height: 100px;
        }

        .header-content {
            width: 1120px;
            height: 100%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            width: 173px;
            height: 60px;
        }

        .tool-bar {
            width: 341px;
            height: 25px;
            border: 1px solid;
        }

        .menu {
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .menu-item {
            height: 20px;
            width: 100px;
            /* 文本左右居中 */
            text-align: center;
            font-size: 15px;
        }

        .banner {
            height: 666px;
            background-color: cornflowerblue;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            background-image: url("./images/banner01.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }

        .right-menu {
            width: 50px;
            height: 160px;
            background-color: #fff;
            margin-right: 20px;
        }

        .type {
            height: 380px;
            width: 840px;
            background-color: #fff;
            /* 左右居中 */
            /* margin: 0 auto; */
            /* margin-top: -41px; */
            margin: -41px auto 0;
            display: flex;
            /* 上下居中 */
            align-items: center;
            /* 左右对齐 */
            justify-content: space-evenly;
        }

        .type-item {
            width: 260px;
            height: 350px;
        }

        .title {
            width: 811px;
            height: 34px;
            /* 左右居中 */
            margin: 26px auto 29px;
        }

        .title-image {
            width: 100%;
            height: 100%;
        }

        .product-list {
            width: 1126px;
            height: 1005px;
            /* 左右居中 */
            margin: 0 auto 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
        }

        .list-item {
            width: 268px;
            height: 320px;
            text-align: center;
            display: flex;
            /* 改变主轴方向：让子元素竖着排列 */
            flex-direction: column;
            justify-content: space-between;
        }

        .item-image {
            width: 268px;
            height: 268px;
        }

        .item-name {
            font-size: 14px;
        }

        .item-price {
            color: #a10000;
        }

        .service {
            height: 113px;
            display: flex;
            justify-content: center;
            align-items: center;
        }



        .service-item {
            width: 290px;
            height: 53px;
            border-right: 1px solid #dbdbdb;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .service-icon {
            width: 53px;
            height: 53px;
            background-image: url("./images/footer-xuebitu.png");
            margin-right: 10px;
        }

        .icon2 {
            background-position: -63px 0px;
        }

        .icon3 {
            background-position: -126px 0px;
        }

        .icon4 {
            background-position: -189px 0px;
        }

        .last-item {
            border-right: none;
        }

        .footer {
            background-color: black;
            color: #fff;
            font-size: 14px;
            padding: 30px 0;
            text-align: center;
            /* height: 87px; */

            /* display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center; */
        }
    </style>
</head>

<body>
    <!-- 网页头部 -->
    <div class="header">
        <div class="header-content">
            <img class="logo" src="./images/logo.png" alt="">
            <div class="tool-bar"></div>
        </div>
    </div>
    <!-- 导航菜单 -->
    <div class="menu">
        <div class="menu-item">首页</div>
        <div class="menu-item">所有商品</div>
        <div class="menu-item">装饰摆件</div>
        <div class="menu-item">装饰摆件</div>
        <div class="menu-item">装饰摆件</div>
        <div class="menu-item">装饰摆件</div>
    </div>
    <!-- 广告大图 -->
    <div class="banner">
        <div class="right-menu"></div>
    </div>
    <!-- 产品分类 -->
    <div class="type">
        <img class="type-item" src="./images/i1.jpg"></img>
        <img class="type-item" src="./images/i2.jpg"></img>
        <img class="type-item" src="./images/i3.jpg"></img>
    </div>
    <!-- 产品标题 -->
    <div class="title">
        <img src="./images/tit01.jpg" class="title-image"></img>
    </div>
    <!-- 产品列表 -->
    <!-- productList：小驼峰命名法 -->
    <div class="product-list">
        <div class="list-item">
            <img class="item-image" src="./images/s7.jpg" alt="">
            <p class="item-name">【最家】不锈钢壁饰墙饰软装</p>
            <strong class="item-price">￥668</strong>
        </div>
        <div class="list-item">
            <img class="item-image" src="./images/s1.jpg" alt="">
            <p class="item-name">【最家】不锈钢壁饰墙饰软装</p>
            <strong class="item-price">￥668</strong>
        </div>
        <div class="list-item">
            <img class="item-image" src="./images/s2.jpg" alt="">
            <p class="item-name">【最家】不锈钢壁饰墙饰软装</p>
            <strong class="item-price">￥668</strong>
        </div>
        <div class="list-item">
            <img class="item-image" src="./images/s3.jpg" alt="">
            <p class="item-name">【最家】不锈钢壁饰墙饰软装</p>
            <strong class="item-price">￥668</strong>
        </div>
        <div class="list-item">
            <img class="item-image" src="./images/s4.jpg" alt="">
            <p class="item-name">【最家】不锈钢壁饰墙饰软装</p>
            <strong class="item-price">￥668</strong>
        </div>
        <div class="list-item">
            <img class="item-image" src="./images/s5.jpg" alt="">
            <p class="item-name">【最家】不锈钢壁饰墙饰软装</p>
            <strong class="item-price">￥668</strong>
        </div>
        <div class="list-item">
            <img class="item-image" src="./images/s6.jpg" alt="">
            <p class="item-name">【最家】不锈钢壁饰墙饰软装</p>
            <strong class="item-price">￥668</strong>
        </div>
        <div class="list-item">
            <img class="item-image" src="./images/s8.jpg" alt="">
            <p class="item-name">【最家】不锈钢壁饰墙饰软装</p>
            <strong class="item-price">￥668</strong>
        </div>
        <div class="list-item">
            <img class="item-image" src="./images/s9.jpg" alt="">
            <p class="item-name">【最家】不锈钢壁饰墙饰软装</p>
            <strong class="item-price">￥668</strong>
        </div>
        <div class="list-item">
            <img class="item-image" src="./images/s10.jpg" alt="">
            <p class="item-name">【最家】不锈钢壁饰墙饰软装</p>
            <strong class="item-price">￥668</strong>
        </div>
        <div class="list-item">
            <img class="item-image" src="./images/s11.jpg" alt="">
            <p class="item-name">【最家】不锈钢壁饰墙饰软装</p>
            <strong class="item-price">￥668</strong>
        </div>
        <div class="list-item">
            <img class="item-image" src="./images/s12.jpg" alt="">
            <p class="item-name">【最家】不锈钢壁饰墙饰软装</p>
            <strong class="item-price">￥668</strong>
        </div>

    </div>
    <!-- 产品服务 -->
    <div class="service">
        <div class="service-item">
            <div class="service-icon icon1"></div>
            <span>7天无理由退货</span>
        </div>
        <div class="service-item">
            <div class="service-icon icon2"></div>
            <span>7天无理由退货</span>
        </div>
        <div class="service-item">
            <div class="service-icon icon3"></div>
            <span>7天无理由退货</span>
        </div>
        <div class="service-item last-item">
            <div class="service-icon icon4"></div>
            <span>7天无理由退货</span>
        </div>
    </div>
    <!-- 网页底部 -->
    <div class="footer">
        <p>蜗牛家居©2019-2021公司版权所有 京ICP备080100-xx号</p>
        <p>违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
    </div>
</body>

</html>